<route>
{
	name:'首页'
}
</route>

<template>
  <div class="main">
    <div>父组件</div>
    <div class="button" @click="testTxt = 'data from parent'">
      1、父组件修改子组件数据
    </div>

    <h1 class="childData">{{ dataFromChild }}</h1>

    <div class="button" style="margin: 10px" @click="show">
      3、通过refs访问子组件方法和属性
    </div>

    <input type="text" style="margin: 10px" v-model="deepData" />
  </div>

  <HelloWorld ref="child" @updateData="handleData" :childData="testTxt" />
</template>

<script setup lang="ts">
import { inject, reactive, ref, getCurrentInstance, provide, onMounted } from "vue";
import HelloWorld from "../components/HelloWorld.vue";

//1、props
const testTxt = ref("original Data");

// ref 和 reactive() 都是用来定义响应式变量，区别在于前者用来定义基本数据类型，后者用来定义复杂数据类型。
// const valueTxt = ref("iii");
const valueTxt = ref({ value: 6 });
// const valueTxt = reactive({
//   value: "ttt",
// });
console.log(valueTxt);

// 2、emit
const dataFromChild = ref("original data");
const handleData = (value: any) => {
  dataFromChild.value = value;
};

//3、通过refs访问子组件方法和属性
const currentInstance = getCurrentInstance();

function show() {
  console.log("输出子组件属性：", currentInstance!.refs!.child!.message);
  currentInstance!.refs!.child!.alertMessage()!;
}

//4、provide/inject
const deepData = ref("original deepData");
provide("deepData", deepData);
setTimeout(() => {
  deepData.value = "changed deepData";
}, 2000);

// 5、eventBus传值
currentInstance!.proxy!.$Bus!.on("message", fn);
function fn(value: any) {
  console.log(value);
  deepData.value = value;
}
// currentInstance.proxy.$Bus.off("*", fn);

onMounted(() => {
  console.log("Mounted!");
});
</script>

<style scoped>
.main {
  margin: 20px auto;
  padding: 20px;
  width: 300px;
  background-color: aquamarine;
  border-radius: 20px;
}

.button {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 10px;
}
</style>
